<template>
    <view class="container">
        <view class="u_navbar" :style="{ paddingTop: paddingTop }">
            <view class="nav_body">
                <u-icon @click="leftBack" name="https://file.tcwang.cc/iconSet/care_back.png" size="64rpx" />
                <view class="nav_right">
                    <u-icon @click="download" name="https://file.tcwang.cc/iconSet/care_download.png" size="64rpx" />
                    <u-icon style="margin-left: 36rpx;" @click="share"
                        name="https://file.tcwang.cc/iconSet/care_share.png" size="64rpx" />
                </view>
            </view>
        </view>
        <!-- 生日 -->
        <view class="page">
            <l-painter :board="poster" isCanvasToTempFilePath @success="posterSuccess($event)"
                css="width: 750rpx;height: 100%;" />
        </view>
        <!-- 页面装饰 -->
        <!-- <image v-if="type == '生日'" class="lucky_draw" src="https://file.tcwang.cc/iconSet/lucky_draw.png" />
        <view v-if="type == '入职'" class="entry_anniversary">红包已自动发送至钱包请前往钱包查看</view>
        <view v-if="type == '结婚'" class="marriage_care">红包已自动发送至钱包请前往钱包查看</view> -->
        <view v-if="type == '新年'" class="Spring_Festival">请前往公司领取新春礼盒</view>
        <view v-if="type == '端午'" class="Dragon_Boat_Festival">请前往公司领取端午礼盒</view>
        <view v-if="type == '中秋'" class="Mid_Autumn_Festival">请前往公司领取端午礼盒</view>
        <!-- <view v-if="type == '儿童'" class="Childrens_Day">红包已自动发送至钱包请前往钱包查看</view> -->
    </view>
</template>

<script>
import minix from './minix/minix.js';
export default {
    mixins: [minix],
    data() {
        return {
            paddingTop: '',
            avatar: '',
            type: '劳动',
            pathObj: {},
            poster: {},
            innerAudioContext: null,
        }
    },
    onLoad({ obj }) {
        let key = ''
        if (1) key = 'moreBlessList'
        else key = 'moreCareList'
        const { poster } = this[key].find(v => v.name == this.type)
        this.poster = poster
    },
    methods: {
        leftBack() {
            console.log('返回');
            // uni.navigateBack()
        },
        download() {
            console.log('下载');
            console.log('pathObj: ', this.pathObj);
            uni.saveImageToPhotosAlbum({
                filePath: this.pathObj, // 临时文件路径
                success() {
                    console.log('图片已成功保存至相册');
                    uni.showToast({
                        title: '保存成功'
                    })
                },
                fail(err) {
                    console.error('保存图片失败', err);
                }
            });
        },
        share() {
            console.log('分享');
            uni.share({
                provider: "weixin",
                scene: "WXSceneTimeline",
                type: 2,
                imageUrl: this.pathObj,
                success: function (res) {
                    console.log("success:" + JSON.stringify(res));
                    uni.showToast({
                        title: '分享成功'
                    })
                },
                fail: function (err) {
                    // console.log("fail:" + JSON.stringify(err));
                }
            });
        },
        posterSuccess(e) {
            this.pathObj = e
            uni.hideLoading()
        }
    },
    onReady() {
        uni.getSystemInfo({
            success: (res) => {
                // console.log(res);
                this.paddingTop = res.statusBarHeight + 'px';
            }
        });
    },
    onShow() {
        if (this.type == '生日') {
            this.innerAudioContext = uni.createInnerAudioContext();
            this.innerAudioContext.autoplay = true;
            this.innerAudioContext.loop = true;
            this.innerAudioContext.src = 'https://file.tcwang.cc/iconSet/birthday_song.mp3';
            this.innerAudioContext.onPlay(() => {
                console.log('开始播放');
            });
            this.innerAudioContext.onError((res) => {
                console.log(res.errMsg);
                console.log(res.errCode);
            });
        }
    },
    onHide() {
        console.log('暂停');
        if (this.innerAudioContext) {
            this.innerAudioContext.pause();
        }
    },
    onUnload() {
        console.log('销毁');
        if (this.innerAudioContext) {
            this.innerAudioContext.pause();
            this.innerAudioContext.destroy()
            this.innerAudioContext = null
        }
    },
}
</script>

<style lang="scss" scoped>
// @import "@/common/libs/common.scss";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    position: relative;
    width: 750rpx;
    height: 100vh;
    z-index: 1;

    .u_navbar {
        position: absolute;
        z-index: 10;
        width: 100%;

        .nav_body {
            padding: 12rpx 32rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav_right {
            display: flex;
            align-items: center;
        }
    }

    .lucky_draw {
        position: absolute;
        z-index: 10;
        left: 50%;
        transform: translateX(-50%);
        bottom: 200rpx;
        width: 212rpx;
        height: 212rpx;
    }

    .entry_anniversary,
    .marriage_care,
    .Spring_Festival,
    .Dragon_Boat_Festival,
    .Mid_Autumn_Festival,
    .Childrens_Day,
    .marriage_care,
    .marriage_care,
    .marriage_care,
    .marriage_care,
    .marriage_care,
    .marriage_care,
    .marriage_care,
    .marriage_care {
        position: absolute;
        z-index: 10;
        left: 50%;
        transform: translateX(-50%);
        bottom: 70rpx;
        width: 260rpx;
        font-size: 26rpx;
        color: #915721;
        line-height: 36rpx;
        text-align: center;
    }

    .marriage_care {
        color: #8B6C4C;
        bottom: 200rpx;
    }

    .Spring_Festival {
        width: 286rpx;
        color: #FFFFFF;
        bottom: 110rpx;
    }

    .Dragon_Boat_Festival {
        width: 286rpx;
        color: #666666;
        bottom: 304rpx;
    }

    .Mid_Autumn_Festival {
        width: 286rpx;
        color: #666666;
        bottom: 304rpx;
        left: 434rpx;
        transform: none;
        bottom: 80rpx;
    }

    .Childrens_Day {
        color: #8D3420;
        bottom: 106rpx;
    }
}


.page3 {
    // background-image: url("https://file.tcwang.cc/iconSet/marriage_care.png");

    .content {
        margin-top: 424rpx;
        margin-left: 90rpx;

        .avater_icon {
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(226deg, #FBCB93 0%, #FFFAE3 51%, #E9BF97 100%);
            padding: 8rpx;
            border-radius: 50%;
        }

        .title {
            margin-top: 48rpx;
            font-weight: bold;
            font-size: 56rpx;
            color: #8B6C4C;
            line-height: 66rpx;
            text-align: left;
        }

        .title,
        .text_28_333 {
            width: 578rpx;
        }

        .text_28_333 {
            width: 570rpx;
            overflow-wrap: break-word;
            color: rgba(139, 108, 76, 1);
            font-size: 28rpx;
            line-height: 50rpx;
        }

        .text_28_333 {
            margin-bottom: 60rpx;
            margin-top: 20rpx;
        }

        .text_28_333:last-child {
            line-height: 44rpx;
            margin-top: 0;
            margin-bottom: 0rpx;
            text-align: right;
        }
    }
}

.page3 {
    // position: absolute;
    // top: 0;
    // width: 750rpx;
    // height: 100vh;
    background: burlywood;
    // background-image: url("https://file.tcwang.cc/iconSet/marriage_care.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>